<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)2000 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun,
J. Brook Monroe nor Charles River Media will be held responsible for any
unwanted effects due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>Getting the Picture II</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
var celArray;
var animCelNbr = new Array(0,1,2,3,4,3,2,1); // Frame sequencer
var celIndex = 0;
var intervalID = null;
function Startup()
{
// Set the timing loop for the animation
intervalID = setInterval("NextCel()",500);
}
function NextCel()
{
// Determine which cel displays next
var idx = animCelNbr[celIndex++];
document.images.animationCel.src = celArray[idx].src;
if(celIndex >= animCelNbr.length)
celIndex = 0;
}
function Setup()
{
celArray = new Array(5);
for(var i = 0; i < 5; i++) {
var fName = "../GRAFX/ANIM/DOGFRM"+(i+1)+".JPG";
celArray[i] = new Image(135,135);
celArray[i].src = fName;
}
Startup();
}
function Shutdown()
{
if(intervalID) {
clearInterval(intervalID);
intervalID = null;
}
}
//-->
</SCRIPT>
<BODY onUnload="Shutdown()">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50 ALIGN = LEFT>Getting the Picture II</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we use image arrays to cache cels for smoother animation.
</FONT><P>
<CENTER>
<IMG NAME="animationCel" SRC="../GRAFX/BLANK.GIF" HEIGHT=135 WIDTH=135>
<FORM>
<INPUT TYPE="button" VALUE="Stop Animation" onClick="Shutdown()">
<INPUT TYPE="button" VALUE="Restart Animation" onClick="Startup()"><BR>
</FORM>
</CENTER><BR>
<SCRIPT LANGUAGE="JavaScript1.2">Setup()</SCRIPT>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
<i><b>(It's typical to refer to a single image in an animation as a <FONT COLOR="007777">frame</FONT>. Because HTML also supports frames,
we've chosen the word <FONT COLOR="007777">cel</FONT> instead, to avoid confusion.)</b></i><p>
The only image loaded through HTML (besides the utensil graphic at the top) is <FONT COLOR="0077777" FACE="Arial,Helvetica">../GRAFX/BLANK.GIF</FONT>,
which just serves as a placeholder for the animation. The animation cels are loaded into
a JavaScript array of <FONT COLOR="770000"><KBD>Image</KBD></FONT> objects. Another 8-place array (which we call an <i>animation
sequencer array</i>) holds the index of the cel to be displayed during the cycle; that way we can re-use cel graphics. This eight-cel
cycle only needs five actual images.<p>
The <FONT COLOR="0077777" FACE="Arial,Helvetica">Setup()</FONT> function is worth a deeper look. In it we load
the graphics to be used in the animation.
<FONT COLOR="770000"><PRE>
function Setup()
{
celArray = new Array(5);
for(var i = 0; i < 5; i++) {
var fName = "../GRAFX/ANIM/DOGFRM"+(i+1)+".JPG";
celArray[i] = new Image(135,135);
celArray[i].src = fName;
}
Startup();
}
</PRE></FONT>
The first step is to create an array to hold the images. Following that, we loop 5 times
to create an <FONT COLOR="770000"><KBD>Image</KBD></FONT> object to hold each animation cel. The objects
created in this array are not accessible through the standard HTML <FONT COLOR="770000">document.images[]</FONT>
array--they exist entirely within a cache maintained by the JavaScript engine. Once we've created a cel,
we point it to the source of the image it should cache. Once the loop completes, we call a function to start
the repeat timer.<p>
The repeat timer calls the <FONT COLOR="0077777" FACE="Arial,Helvetica">NextCel()</FONT> function, shown below.
<FONT COLOR="770000"><PRE>
function NextCel()
{
// Determine which cel displays next
var idx = animCelNbr[celIndex++];
document.images.animationCel.src = celArray[idx].src;
if(celIndex >= animCelNbr.length)
celIndex = 0;
}
</PRE></FONT>
The first thing this function does is determine which element of the animation sequencer array contains
the cel number that's next to display; the next line assigns the source of the image created in HTML to the
source of one of the cel caches. For clarity, the HTML image is named rather than referred to by its index
value in the images array; we've found that it's easy to miscount the images in an HTML document while trying
to determine the index of a particular image. In our first draft of
this recipe we forgot about the recipe title, and were animating <FONT COLOR="770000">document.images[0]</FONT>, which is the picture
of the knife and fork at the top of the page! Needless to say, it wasn't a very convincing demonstration,
and led to our naming the graphic we intended to be animated as <FONT COLOR="770000">animationCel</FONT>.
</FONT>
<BR><BR><CENTER><FONT FACE="Arial,Helvetica" SIZE=2>Yes, the dog has a tail. It's behind him all the time!</FONT></CENTER>
<BR><BR><h5>Copyright ©2000 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>